<template>
	<view class="remind">
		<view class="remind_con public_sty">
			<view class="remind_box">
				<view class="remind_title" style="margin-top: 10rpx;"><text>药品名称</text></view>
				<view class="remind_input"><input class="" type="text" v-model="remindData.remindName" placeholder="请输入药品名称" placeholder-style="color:#999999" /></view>
			</view>
			<view class="remind_box">
				<view class="remind_title"><text>用法用量</text></view>
				<view class="remind_input_box">
					<view class="remind_consum">
						<view class="remind_text_sty"><text>单次用量</text></view>
						<view class="remind_consum_box">
							<input type="text" v-model="remindData.remindConsum" value="" placeholder-style="text-align:right" />
							<text>片</text>
						</view>
					</view>
					<view class="remind_consum">
						<view class="remind_text_sty"><text>用药次数</text></view>
						<view class="remind_consum_box">
							<input type="text" v-model="remindData.remindfrewuen" value="" placeholder-style="text-align:right" />
							<text>次</text>
						</view>
					</view>
					<view class="remind_consum">
						<view class="remind_text_sty"><text>用药天数</text></view>
						<view class="remind_consum_box">
							<input type="text" v-model="remindData.remindDays" value="" placeholder-style="text-align:right" />
							<text>天</text>
						</view>
					</view>
				</view>
			</view>
			<view class="remind_box">
				<view class="remind_title"><text>提醒时间</text></view>
				<view class="remind_consum" v-for="(item, index) in remindTime" :key="index">
					<view class="time_til remind_text_sty">
						<text>提醒时间{{ item.time == '' ? '' : index + 1 }}</text>
					</view>
					<picker mode="time" :value="item.time" start="00:00" end="23:59" @change="timechange" @click="pickerClick(index)">
						<view :class="item.time == '' ? 'remind_text_sty' : ''">{{ item.time == '' ? '请输入时间' : item.time }}</view>
					</picker>
				</view>
				<view class="addremind" @click="addremind" v-if="remindTime.length<3">
					<text style="font-size: 50rpx;">+</text>
					<text>添加提醒时间</text>
				</view>
			</view>
		</view>
		<view class="rembtn">
			<button type="primary">提交</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			remindData: {
				remindName: '',
				remindConsum: '',
				remindfrewuen: '',
				remindDays: ''
			},
			remindTime: [
				{
					time: ''
				}
			],
			timeChangeId: 0
		};
	},
	methods: {
		pickerClick(id) {
			this.timeChangeId = id;
		},
		timechange(e) {
			console.log(e.detail.value);
			this.remindTime[this.timeChangeId].time = e.detail.value;
		},
		addremind(){
			let obj = {}
			obj.time=""
			this.remindTime.push(obj)
		}
	}
};
</script>

<style lang="scss" scoped>
.remind {
	padding: 30rpx;
}
.remind_con {
	padding: 30rpx;
	margin-bottom: 80rpx;
}
.remind_box {
	.remind_title {
		margin-top: 40rpx;
	}
	.remind_input {
		margin-top: 28rpx;
		input {
			padding: 28rpx 30rpx;
			border: 1rpx solid #e5e5e5;
			border-radius: 15.24rpx;
		}
	}
	.remind_input_box {
		.remind_consum_box {
			display: flex;
		}
	}
}
.remind_text_sty {
	color: #999999;
}
.remind_consum {
	display: flex;
	justify-content: space-between;
	padding: 28rpx 30rpx;
	border: 1rpx solid #e5e5e5;
	border-radius: 15.24rpx;
	text-align: right;
	margin-top: 24rpx;
}
.addremind {
	display: flex;
	align-items: center;
	color: #00b359;
	margin-top: 30rpx;
	margin-bottom: 40rpx;
	justify-content: center;
}
.rembtn{
	border-radius: 20rpx;
}
</style>
